/***

This is a pure-CSS3 clock. It uses CSS animations and shapes, without any images or JavaScript.

***/

randTime = [11, 10, 54]
document.getElementsByClassName('digital-wrap')[0].style.display = 'none';
function animationContorl() {
    aniButton = document.getElementsByTagName('button')[0];
    if (aniButton.textContent == "Stop Animation") {
        document.getElementsByTagName('button')[0].textContent = "Start Animation";
        document.getElementsByClassName('minutes-hand')[0].style.animation="minutes 3600s linear 0s 0s infinite";
        document.getElementsByClassName('hours-hand')[0].style.animation="hours 3600s linear 0s infinite";
        document.getElementsByClassName('seconds-hand')[0].style.animation="seconds 60s steps(60, end) 0s infinite";
    }

    else{
        document.getElementsByTagName('button')[0].textContent = "Stop Animation";

        document.getElementsByClassName('minutes-hand')[0].style.animation="seconds 0s steps(60, end) 0s infinite";
        document.getElementsByClassName('hours-hand')[0].style.animation="seconds 0s steps(60, end) 0s infinite";
        document.getElementsByClassName('seconds-hand')[0].style.animation="seconds 0s steps(60, end) 0s infinite";
    }

}
function getRandomInt(max, min = 0) {
    return Math.floor(Math.random() * (max - min) + min);
}
function setRandomTime(){
    randTime[0] = getRandomInt(12,1);
    randTime[1] = getRandomInt(60,1);
    randTime[2] = getRandomInt(60,1);
    hourDegree = (randTime[0]/12)*360;
    minuteDegree = (randTime[1]/60)*360;

    document.getElementsByClassName('hours-hand')[0].style.transform = `rotate(${hourDegree}deg)`;
    document.getElementsByClassName('minutes-hand')[0].style.transform = `rotate(${minuteDegree}deg)`;
    console.log(randTime)

    displayButton = document.getElementsByTagName('button')[3];
    if(displayButton.textContent == "Hide Digit Time"){

        displayContorl()
    }
    else{
        document.getElementById('digit-hour').textContent = randTime[0];
        document.getElementById('digit-minute').textContent = randTime[1];
        document.getElementById('digit-second').textContent = randTime[2];
    }
    
}
function displayContorl() {
    displayButton = document.getElementsByTagName('button')[3];
    document.getElementById('digit-hour')
    if(displayButton.textContent == "Show Digit Time")
    {
        displayButton.textContent = "Hide Digit Time";
        document.getElementsByClassName('digital-wrap')[0].style.display = 'block';
    }
    else
    {
        displayButton.textContent = "Show Digit Time";
        
        document.getElementsByClassName('digital-wrap')[0].style.display = 'none';
    }
    document.getElementById('digit-hour').textContent = randTime[0];
    document.getElementById('digit-minute').textContent = randTime[1];
    document.getElementById('digit-second').textContent = randTime[2];
}
function getElement() {
    document.getElementsByClassName('minutes-hand')[0].style.transform = "rotate(180deg)";
    document.getElementsByClassName('minutes-hand')[0].style.transform = "rotate(180deg)";
    document.getElementsByClassName('minutes-hand')[0].style.transform = "rotate(180deg)";
}